<template>
  <div>
    <el-card style="width:100%">
      <p>供应商管理</p>
      <div class="right">
        <div class="searchAreaTop flex">
          <el-form ref="serachForm" :model="searchForm" :inline="true">
            <!--
            <el-form-item prop="productCode">
              <el-input v-model="searchForm.productCode" placeholder="供应商编号"></el-input>
            </el-form-item>
            -->
            <el-form-item prop="menuName">
              <el-input v-model="searchForm.menuName" placeholder="供应商名称"></el-input>
            </el-form-item>
            <el-form-item prop="action">
              <el-button size="medium" type="primary" @click="queryListAct">搜索</el-button>
            </el-form-item>
            <el-form-item prop="action">
              <el-button type="primary" @click="addBtn">新增供应商</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="tableBox">
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%" height="500" stripe>
          <!--
          <el-table-column prop="id" label="供应商编号" align="center"></el-table-column>
          -->
          <el-table-column prop="menuName" label="供应商名称" align="center"></el-table-column>
          <el-table-column prop="companyNature" label="总部地址" align="center"></el-table-column>
          <el-table-column prop="companyTrade" label="公司行业" align="center"></el-table-column>
          <el-table-column prop="companyProduct" label="主营产品" align="center"></el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="300">
            <template slot-scope="scope">
              <el-row>
                <el-button
                  type="primary"
                  size="mini"
                  @click="modifyBtn(scope.row)"
                  icon="el-icon-edit"
                ></el-button>
                <el-button type="primary" size="mini" @click="detailBtn(scope.row)">查看</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="updateDelete(scope.row)">删除</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          style="text-align:center;margin-top:20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageParams.currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParams.total"
        ></el-pagination>
      </div>
    </el-card>
    <!-- 查看详情 -->
    <el-dialog
      title="供应商信息"
      :visible.sync="showDetail"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="30%"
      style="text-align: center;"
    >
      <el-form
        :model="supplierInfo"
        label-position="left"
        label-width="150px"
        style="margin-left:20px"
      >
        <el-form-item label="供应商名称" prop="menuName" align="left">{{supplierInfo.menuName}}</el-form-item>
        <el-form-item label="供应商网站" prop="menuWeb" align="left">{{supplierInfo.menuWeb}}</el-form-item>
        <el-form-item label="公司性质" prop="companyNature" align="left">{{supplierInfo.companyNature}}</el-form-item>
        <el-form-item label="公司行业" prop="companyTrade" align="left">{{supplierInfo.companyTrade}}</el-form-item>
        <el-form-item
          label="主营产品"
          prop="companyProduct"
          align="left"
        >{{supplierInfo.companyProduct}}</el-form-item>
        <el-form-item label="公司电话" prop="companyTel" align="left">{{supplierInfo.companyTel}}</el-form-item>
        <el-form-item label="公司电话" prop="companyTel" align="left">{{supplierInfo.companyTel}}</el-form-item>
        <el-form-item
          label="公司详细地址"
          prop="companyAddres"
          align="left"
        >{{supplierInfo.companyAddres}}</el-form-item>
        <el-form-item label="联系人" prop="companyContact" align="left">{{supplierInfo.companyContact}}</el-form-item>
      </el-form>
    </el-dialog>
  <!-- 新增 -->
    <el-dialog
      title="供应商"
      :visible.sync="showAddDetail"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="60%"
      style="text-align: center;"
    >
      <el-form ref="addForm" :model="addForm" :rules="rules" label-position="left" label-width="120px" class="infos flex">
        <el-form-item label="制造商名称" prop="menuName" style="width:30%">
          <el-input v-model="addForm.menuName" placeholder="请输入制造商名称"></el-input>
        </el-form-item>
        <el-form-item label="供应商网站" prop="menuWeb" style="width:30%">
          <el-input v-model="addForm.menuWeb" placeholder="请输入供应商网站"></el-input>
        </el-form-item>
        <el-form-item label="总部地址" prop="companyNature" style="width:30%">
          <el-select v-model="addForm.companyNature" placeholder="请选择">
            <el-option
              v-for="item in companyType"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公司行业" prop="companyTrade" style="width:30%;">
          <el-select v-model="addForm.companyTrade" placeholder="请选择">
            <el-option
              v-for="item in companyTrade"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主营产品" prop="companyProduct" style="width:30%">
          <el-input v-model="addForm.companyProduct" placeholder="请输入主营产品"></el-input>
        </el-form-item>
        <!-- <el-form-item label="公司区域" prop="companyArea" style="width:30%">
          <el-input v-model="addForm.companyArea" placeholder="请输入公司区域"></el-input>
        </el-form-item> -->
        <el-form-item label="公司地址" prop="companyAddres" style="width:30%">
          <el-input v-model="addForm.companyAddres" placeholder="请输入公司地址"></el-input>
        </el-form-item>
        <el-form-item label="公司电话" prop="companyTel" style="width:30%">
          <el-input v-model="addForm.companyTel" placeholder="请输入公司电话"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="companyContact" style="width:30%">
          <el-input v-model="addForm.companyContact" placeholder="请输入联系人"></el-input>
        </el-form-item>
        <el-form-item label="公司邮箱" prop="companyTel" style="width:30%">
          <el-input v-model="addForm.companyEmail" placeholder="请输入公司联系人邮箱"></el-input>
        </el-form-item>
        <!-- <el-form-item label="备注" style="width:100%">
          <el-input v-model="addForm.menuMemo" placeholder="请输入备注" rows="4"></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showAddDetail = false">取 消</el-button>
        <el-button type="primary" @click="addSupplier">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog
      title="供应商"
      :visible.sync="showUpdateDetail"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      width="60%"
      style="text-align: center;"
    >
      <el-form ref="addForm" :model="addForm" :rules="rules" label-position="left" label-width="120px" class="infos flex">
        <el-form-item label="供应商名称" prop="menuName" style="width:30%">
          <el-input v-model="addForm.menuName" placeholder="请输入供应商名称"></el-input>
        </el-form-item>
        <el-form-item label="供应商网站" prop="menuWeb" style="width:30%">
          <el-input v-model="addForm.menuWeb" placeholder="请输入供应商网站"></el-input>
        </el-form-item>
        <el-form-item label="公司性质" prop="companyNature" style="width:30%">
          <el-select v-model="addForm.companyNature" placeholder="请选择">
            <el-option
              v-for="item in companyType"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="公司行业" prop="companyTrade" style="width:30%;">
          <el-select v-model="addForm.companyTrade" placeholder="请选择">
            <el-option
              v-for="item in companyTrade"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主营产品" prop="companyProduct" style="width:30%">
          <el-input v-model="addForm.companyProduct" placeholder="请输入主营产品"></el-input>
        </el-form-item>
        <!-- <el-form-item label="公司区域" prop="companyArea" style="width:30%">
          <el-input v-model="addForm.companyArea" placeholder="请输入公司区域"></el-input>
        </el-form-item> -->
        <el-form-item label="公司地址" prop="companyAddres" style="width:30%">
          <el-input v-model="addForm.companyAddres" placeholder="请输入公司地址"></el-input>
        </el-form-item>
         <el-form-item label="公司电话" prop="companyTel" style="width:30%">
          <el-input v-model="addForm.companyTel" placeholder="请输入公司电话"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="companyContact" style="width:30%">
          <el-input v-model="addForm.companyContact" placeholder="请输入联系人"></el-input>
        </el-form-item>
        <el-form-item label="公司邮箱" prop="companyTel" style="width:30%">
          <el-input v-model="addForm.companyEmail" placeholder="请输入公司联系人邮箱"></el-input>
        </el-form-item>
        <!-- <el-form-item label="备注" style="width:100%">
          <el-input v-model="addForm.menuMemo" placeholder="请输入备注" rows="4"></el-input>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showUpdateDetail = false">取 消</el-button>
        <el-button type="primary" @click="updateSupplier">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { SUPPLIER_LIST,SUPPLIER_UPDATE,SUPPLIER_ADD,MENU_DELETE} from "@/utils/api";
import { formatDate } from "@/utils/validate.js";
export default {
  data() {
    return {
      //公司性质：（1.研发 2.制造 3.研发 & 制造4.科研单位5.学校6.其他）
      //companyType:[{"name":"研发"},{"name":"制造"},{"name":"研发、制造"},{"name":"科研单位"}, jsw
      companyType:[{"name":"大陆"},{"name":"台湾"},{"name":"日本"},{"name":"韩国"},{"name":"德国"},{"name":"法国"},{"name":"英国"},{"name":"美国"},{"name":"其他"}],
      //公司行业：（消费电子—手机相关/消费电子—其它/工业设备/车载电子/网络通讯/家用电器/机械设备/其它）
     //companyTrade:[{"name":"消费电子—手机相关"},{"name":"消费电子—其它"},{"name":"工业设备"},
      //{"name":"车载电子"},{"name":"网络通讯"},
      //{"name":"家用电器"},{"name":"机械设备"},{"name":"其它"}],
       companyTrade:[{"name":"主动器件"},{"name":"被动元件"},{"name":"连接器"},
      {"name":"PCB"},{"name":"模组"},
      {"name":"电子成品"},{"name":"其他"}],
      showAddDetail:false,
      showUpdateDetail:false,
      addForm: {
        menuName: '',
        menuMemo: '',
        menuWeb: '',
        companyNature: '',
        companyTrade: '',
        companyProduct: '',
        companyArea: '',
        companyTel: '',
        companyAddres: '',
        companyContact: '',
        companyEmail:''
      },
      rules: {
          menuName: [
            { required: true, message: '请输入供应商名称', trigger: 'blur' },
          ],
          menuWeb: [
            { required: true, message: '请输入供应商网站', trigger: 'blur' }
          ],
          companyNature: [
            { required: true, message: '请输入公司性质', trigger: 'blur' }
          ],
          companyTrade: [
            { required: true, message: '请输入公司行业', trigger: 'blur' }
          ],
          companyProduct: [
            { required: true, message: '请输入主营产品', trigger: 'blur' }
          ],
          // companyArea: [
          //   { required: true, message: '请输入公司区域', trigger: 'blur' }
          // ],
          companyTel: [
            { required: true, message: '请输入公司联系人邮箱', trigger: 'blur' }
          ],
          companyAddres: [
            { required: true, message: '请输入公司详细地址', trigger: 'blur' }
          ],
          companyEmail: [
            { required: true, message: '请输入公司邮箱', trigger: 'blur' }
          ],
          companyContact: [
            { required: true, message: '请输入联系人', trigger: 'blur' }
          ]
        },
      searchForm: { companyName: "" },
      // 查询条件
      searchCondition: {},
      // 表格数据
      tableData: [],
      // 分页参数
      pageParams: {
        currentPage: 1,
        pageSize: 10,
        total: 50
      },
      // 详情弹窗
      supplierInfo: {},
      showDetail: false
    };
  },
  mounted() {
    // 初始化查询
    this.queryListAct();
  },
  methods: {
    // 新增按钮
    addBtn() {
      this.addForm={}
      this.showAddDetail=true
      // this.$router.push({
      //   path: "supplierAdd"
      // });
    },
    // 修改按钮
    modifyBtn(row) {
      this.showUpdateDetail=true
      this.addForm=row
      // this.$router.push({
      //   path: "supplierModify",
      //   query: {
      //     data: row
      //   }
      // });
    },
    // 详情按钮
    detailBtn(row) {
      this.supplierInfo = row;
      this.showDetail = true;
    },
    // (启动弹窗)删除
    updateDelete(_scope) {
      console.log('===>'+JSON.stringify(_scope))
      this.$confirm("此操作将删除该供应商, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          MENU_DELETE({
            menuId: _scope.id,
          }).then(res => {
            this.queryListAct()
          })
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    updateSupplier(){
      SUPPLIER_UPDATE({
        id: this.addForm.id,
        menuName:this.addForm.menuName,
        menuMemo: this.addForm.menuMemo,
        menuWeb:this.addForm.menuWeb,
        companyNature:this.addForm.companyNature,
        companyTrade:this.addForm.companyTrade,
        companyProduct:this.addForm.companyProduct,
        companyArea:this.addForm.companyArea,
        companyTel:this.addForm.companyTel,
        companyAddres:this.addForm.companyAddres,
        companyContact:this.addForm.companyContact,
        companyEmail:this.addForm.companyEmail
      }).then(res => {
        this.$message.success(JSON.stringify(res))  
        if(res.status==200){
          this.$message.success('success')  
          this.showUpdateDetail = false
           this.queryListAct()
        }
      });
    },
    addSupplier(){
      SUPPLIER_ADD({
        menuName:this.addForm.menuName,
        menuMemo: this.addForm.menuMemo,
        menuWeb:this.addForm.menuWeb,
        companyNature:this.addForm.companyNature,
        companyTrade:this.addForm.companyTrade,
        companyProduct:this.addForm.companyProduct,
        companyArea:this.addForm.companyArea,
        companyTel:this.addForm.companyTel,
        companyAddres:this.addForm.companyAddres,
        companyContact:this.addForm.companyContact,
        companyEmail:this.addForm.companyEmail
      }).then(res => {
        this.$message.success(JSON.stringify(res))  
        if(res.status==200){
          this.$message.success('success')  
          this.showAddDetail = false
          this.queryListAct()
        }
      });
    },
    // 列表查询
    queryListAct() {
      SUPPLIER_LIST({
        productCode:this.searchForm.productCode,
        menuName:this.searchForm.menuName,
        pageNo: this.pageParams.currentPage,
        pageSize: this.pageParams.pageSize
      }).then(res => {
        this.tableData = res.data.dataList;
        this.pageParams.total = res.data.count;
      });
    },
    // 改变页尺寸
    handleSizeChange(val) {
      this.pageParams.pageSize = val;
      this.queryListAct();
    },
    // 改变页码
    handleCurrentChange(val) {
      this.pageParams.currentPage = val;
      this.queryListAct();
    },
    //时间格式化
    formatSecond(second) {
      if (!second) return "";
      return formatDate(new Date(second * 1000), "yyyy-MM-dd hh:mm:ss");
    }
  }
};
</script>
<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}
.infos {
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
  .item {
    width: 30%;
  }
}
.tableBox {
  width: 100%;
  background: #fff;
  padding: 10px 2px;
  border-radius: 5px;
  //   box-shadow: 2px 3px 15px 0 #ccc;
}
</style>